<template>
	<view>
	<view v-for="(item, index) in couponList" :key="index" class="coupon_box">
		<view class="left">
			<view class="left_top">
				<text class="hui" :style="'background:' + colors">惠</text>
				<text class="hui_name">{{item.couponName}}</text>
				<text class="hui_category" >{{item.couponMark}}</text>
			</view>
			<view class="left_bottom">
				<text> <slot>有效期至：</slot>{{item.endTime}}</text>
			</view>
		</view>
		<image src="/static/ysy.png" class="ysy" v-if="item.couponStatus == 3 || item.couponStatus == 4 || item.couponStatus == 5"></image>
		<view class="right" v-if="item.couponCondition == 1" :style="'background:' + (item.couponStatus == 2 ? colors:'')">
			<view class="money">￥{{item.cutAmount}}</view>
			<text>满{{item.requiredAmount}}可用</text>
			<!-- 当优惠券是未使用状态且在订单里选择使用 -->
			<text class="shiyong" :style="{'color': colors}" v-if="item.couponStatus == 2 " @click="clickButton(item.id, index)">{{buttonTextList[index]}}</text>
			<!-- 当优惠券是未使用状态，在我的优惠券列表里 -->
			<!-- <text class="shiyong" :style="{'color': colors}" v-else @click="clickButton(item.id, index)">{{buttonTextList[index]}}</text> -->
		</view>		
		<view class="right" v-else-if="item.couponCondition == 2" :style="'background:' + (item.couponStatus == 2 ? colors:'')">
			<view class="money">{{item.discount}}%</view>
			<text class="shiyong" :style="{'color': colors}" v-if="item.couponStatus == 2" @click="clickButton(item.id, index)">{{buttonTextList[index]}}</text>
			<!-- <text class="shiyong" :style="{'color': colors}" v-else @click="clickButton(item.id, index)">{{buttonTextList[index]}}</text> -->
		</view>
	</view>
	</view>
</template>


<script>

	export default {
		data() {
			return {
				buttonTextList: []	,// 为了让每一张优惠券，使用、取消使用、去使用区分开
				couponCondition: 1		// 默认是满减
			};
		},

		components: {},
		props: {
			// 选择使用的优惠券
			selectedCouponIds: {
				type: Array
			},	
			colors: {
				type: String
			},
			couponList: {
				type: Array
			},
			useInOrder: false	// 默认没有在订单里使用
		},
		watch: {
			couponList: {
				handler:  function() {
					this.updateList();
				},	
				deep: true
			},
			selectedCouponIds: {
				handler:  function() {
					this.updateList();
				},
				deep: true
			}
		},
		methods: {
			clickButton(id, index) {
				if (this.useInOrder == false) {
					this.$emit("itemClick", id);
				} else {
					console.log(this.buttonTextList[index])
					// 当选择第一张优惠券时
					if (this.selectedCouponIds.length == 0) {
						// 打折跟满减不能同时使用
						if (this.couponList[index].couponCondition == 1) {
							this.couponCondition = 1
						} else {
							this.couponCondition = 2
						}
						this.buttonTextList[index] = this.buttonTextList[index] === '使用' ? '取消使用' : '使用'
						this.$emit("itemClick", id)	
					} else {
						// 当优惠券类型相同时
						if (this.couponList[index].couponCondition == this.couponCondition) {
							this.buttonTextList[index] = this.buttonTextList[index] === '使用' ? '取消使用' : '使用'
							this.$emit("itemClick", id)							
						} else {
							console.log("满减跟打折不能同时使用")
						}
					}
					this.$forceUpdate()
				}
			},
			updateList() {
				// 当查看选择优惠券时，传入的是一个 id数组，
				
				for(let i = 0;i < this.couponList.length;i++) {
					if (this.useInOrder) {
						// 如果优惠券列表的元素有这个id，则内容应为取消使用
						// 字符串跟数字不能兼容
						if (this.selectedCouponIds.indexOf(this.couponList[i].id + "") != -1) {
							this.buttonTextList[i] = '取消使用'
						} else {
							this.buttonTextList[i] = '使用'
						}
					} else {
						this.buttonTextList[i] = '去使用'
					}
				}
				this.$forceUpdate()
			}
		}
	};
</script>

<style scoped lang="scss">
	.coupon_box {
		
		margin: 28upx 28upx;
		box-shadow: 0upx 0upx 10upx #ddd;
		position: relative;
		border-radius: 10upx;
		overflow: hidden;
		
	}
	
	.coupon_box .left {
		width: 70%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 20upx;
		float: left;
	}
	
	.coupon_box .left .hui {
		width: 40upx;
		height: 40upx;
		font-size: 20upx;
		color: #fff;
		background-color: #EC1818;
		border-radius: 8upx;
		line-height: 40upx;
		text-align: center;
		display: inline-block;
		transform: translateY(-5upx);
	}
	
	.coupon_box .left .left_top {
		width: 60vw;
		display: block;
		font-size: 26upx;
		font-weight: bold;
	
	}
	
	.left_top .hui_name {
		line-height: 60upx;
		height: 60upx;
		margin-left: 20upx;
		display: inline-block;
	}
	
	.left_top .hui_category {
		float: right;
		height: 40upx;
		font-size: 28upx;
		color: #fff;
		background-color: #EC1818;
		border-radius: 10upx;
		line-height: 40upx;
		transform: translateY(10upx);
		display: inline-block;
	}
	
	.left_bottom {
		font-size: 24upx;
		font-weight: bold;
		color: #333;
		height: 60upx;
		line-height: 60upx;
	}
	
	.coupon_box .right {
		text-align: center;
		height: 160upx;
		width: 160upx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		background-color: #A8A8A8;
		float: right;
	}
	
	.coupon_box .right .shiyong {
		height: 40upx;
		line-height: 40upx;
		background-color: #fff;
		border-radius: 20upx;
		padding: 0 20upx;
		color: #A8A8A8;
		
	}
	
	.coupon_box .right .money {
		font-size: 45upx;
		color: #fff;
	}
	
	.coupon_box .right text {
		font-size: 24upx;
		color: #fff;
		height: 40upx;
		line-height: 34upx;
	}
	
	.coupon_box .bottom {
		height: 60upx;
		line-height: 60upx;
		display: flex;
		align-content: flex-start;
		font-size: 24upx;
		margin-top: 10upx;
	}
	
	.coupon_box .bottom view {
		margin-right: 20upx;
		color: #888;
		font-weight: bold;
	}
	
	.ysy {
		width: 80upx;
		height: 80upx;
		position: absolute;
		top: 60upx;
		right: 200upx;
	}
</style>